<template >
  <el-main>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item class="font-bold">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <!-- 搜索框 -->
    <el-row :gutter="10" v-model="formInline">
      <span class="ml-2.5 mt-1">搜索：</span>
      <el-col :span="6">
        <el-input type="text" input v-model="formInline.cateName" placeholder="请输入类别名称"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" plain size="medium" @click="getData(formInline)"> 搜索</el-button>
        <el-button type="primary" size="medium" @click="handleEdit">新增</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <div class="mt-4">
      <el-table :data="tableData">
        <el-table-column prop="cateName" label="类别名称" width="250"></el-table-column>
        <el-table-column prop="classify" label="类别分类" width="200"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="330"></el-table-column>
        <el-table-column fixed="right" label="操作" width="400">
          <template #default="scope">
            <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="deleteCate(scope.row.categoryId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="text-center mt-4" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="query.pageNum" :page-sizes="[10, 20, 50]" :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="query.total">
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog v-model="dialogFormVisible" :title="title">
      <el-form ref="form" :model="form">
        <el-form-item label="类别名称" label-width="140px">
          <el-input v-model="form.cateName" autocomplete="off" placeholder="请输入类别名称" />
        </el-form-item>
        <el-form-item label="类别分类" label-width="140px">
          <el-select v-model="form.classify" placeholder="请选择类别分类">
            <el-option v-for="item in Classify" :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitForm('form')"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
  </el-main>
</template>

<script >
import { ArrowRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
export default {
  data() {
    return {
      formInline: {// 搜索栏
        cateName: '',
      },
      tableData: [],
      query: {//分页数据
        pageNum: 1,// 默认页码
        pageSize: 10,
        total: 5,// 数据量
      },
      dialogFormVisible: false, //控制弹框显示与隐藏
      title: '',// 弹框标题
      // 表单数据
      form: {
        categoryId: '',
        cateName: '',
        classify: '',
      },
      Classify: [],
    };
  },
  mounted() {
    this.getData()
    this.getClassify()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/admin/selectCategoryByQuery',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "adminToken" ),
          cateName: this.formInline.cateName,
          limit: this.query.pageSize,
          page: this.query.pageNum,
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/admin/login' )
        } else {
          // 数据接收
          this.tableData = res.data.data.categoryList
          this.query.total = res.data.data.total
        }
      } )
    },
    getClassify() {
      axios( {
        url: 'http://127.0.0.1:8081/api/admin/selectClassify',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "adminToken" ),
        },
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
          this.$router.push( '/admin/login' )
        } else {
          // 数据接收
          this.Classify = res.data.data.classifyList
        }
      } )
    },
    //切换当前页显示的数据条数，执行方法
    handleSizeChange( val ) {
      this.query.pageSize = val
      this.getData()
    },
    //切换页数，执行方法
    handleCurrentChange( val ) {
      this.query.pageNum = val
      this.getData()
    },
    // 显示编辑界面弹出框
    handleEdit: function ( index, row ) {
      this.dialogFormVisible = true;
      if ( row != undefined && row != "undefined" ) {
        this.title = "修改分类";
        this.form.categoryId = row.categoryId;
        this.form.cateName = row.cateName;
        this.form.classify = row.classify;
      } else {
        this.title = "新增分类";
        this.form.cateName = "";
        this.form.classify = "";
      }
    },
    // 关闭新增、修改弹出框
    closeDialog() {
      this.dialogFormVisible = false;
    },
    // 新增、修改提交
    submitForm( form ) {
      this.$refs[ form ].validate( valid => {
        if ( valid ) {
          if ( this.title == "修改分类" ) {
            axios( {
              url: 'http://127.0.0.1:8081/api/admin/updateCate',
              method: 'post',
              params: {
                token: window.localStorage.getItem( "adminToken" ),
                categoryId: this.form.categoryId,
                cateName: this.form.cateName,
                classify: this.form.classify,
              },
            } ).then( res => {
              if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
                window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
                this.$router.push( '/admin/login' )
              } else {
                this.$message.success( res.data.message )
                this.getData()
                this.dialogFormVisible = false
              }
            } )
          } else {
            axios( {
              url: 'http://127.0.0.1:8081/api/admin/insertCate',
              method: 'post',
              params: {
                token: window.localStorage.getItem( "adminToken" ),
                cateName: this.form.cateName,
                classify: this.form.classify,
              },
            } ).then( res => {
              if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
                window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
                this.$router.push( '/admin/login' )
              } else {
                this.$message.success( res.data.message )
                this.getData()
                this.dialogFormVisible = false
              }
            } )
          }
        } else {
          this.$message.error( "请填写完所有信息后再提交！" );
          return false;
        }
      } );
    },
    // 删除分类
    deleteCate( categoryId ) {
      ElMessageBox.confirm(
        '确认删除该分类吗？',
        '删除',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then( () => {
        axios( {
          url: 'http://127.0.0.1:8081/api/admin/deleteCate',
          method: 'post',
          params: {
            token: window.localStorage.getItem( "adminToken" ),
            categoryId: categoryId,
          },
        } ).then( res => {
          if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
            window.localStorage.removeItem( "adminToken" ) // 删除卡片，跳转到登录页面
            this.$router.push( '/admin/login' )
          } else {
            this.$message.success( res.data.message )
            this.getData()
          }
        } )
      } ).catch( () => {
        ElMessage( {
          type: 'info',
          message: '取消删除分类',
        } )
      } )
    },
  },

};
</script>
<style scoped>
.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}
</style>